<#include "/basicdata/common/scripts.html">
<#include "/basicdata/common/scripts_add2.html">
<body>
<style>
    .bootstrap-select{
        width: 71%!important;
    }
    .select2 {
        width: 200px!important;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 13px;
    }

    .select2-container .select2-selection--single {
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        height: 32px!important;
        -webkit-user-select: none;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #444;
        line-height: 32px!important;
    }
</style>
<div class="fh-model" style="height:400px;">
    <div class="oper-search">
        <form class="form-inline" id="searchForm">
            <div class="form-group">
                <label class="control-label-query text-justify">应用系统<span class="span-justify"></span></label>
                <select name="applicationName" id="applicationName" class="selectpicker" data-live-search="true" onchange="appNameChange()">
                    <#list applicationList as application>
                    <option value="${application.applicationName!}">${application.applicationName!}</option>
                    </#list>
                </select>
            </div>
            <div class="form-group">
                <label  class="control-label-query text-justify" >角色名称 <span class="span-justify"></span></label>
                <input id="roleName" name="roleName" type="text" class="form-control" autocomplete="off"/>
            </div>
            <div class="form-group">
                <span class="btn glyphicon glyphicon-search btn-sm" onclick="searchRoleBtn()">查询</span>
            </div>
        </form>
    </div>
    <table id="roleTable" class="eamtable">
    </table>

</div>
<div class="div-model-btn">
    <div class="model-btn" onclick="sub()">确定</div>
</div>
</body>
<script>
    $(document).ready(function() {
        $(".selectpicker").select2();
    });

    //全局变量，复选框选中项
    var chk_value = [];

    $(function () {
        //二次添加带出已选项
        var idz = "";
        if (idz != "") {
            chk_value = idz.split(",");
        }
    });
    var roleTable = $("#roleTable");
    let checkboxWithRemember = new CheckboxWithRemember(roleTable);
    $(function() {
        sys.useSimpleRetrieveData();
        var staticPrefix = "${static}";
        var config = sys.DynamicDatabeConfig(staticPrefix,getSearchUrl(),[
            {   data:null,
                /*title:"<div class='pretty success' style='margin: 0;'>"+
                    "<input type='checkbox' class='checker check-all'>"+
                    "<label><i class='mdi mdi-check'></i></label></div>" ,
                render: function(data){
                    return  '<div class="pretty success" style="margin: 0;">'+
                        '<input type="checkbox" class="checker check-item" data-id="'+data.id+'">'+
                        '<label><i class="mdi mdi-check"></i></label>'+
                        '</div>';
                },*/
                title: checkboxWithRemember.getCheckAllStr(),
                render: function (data2, type, row, meta) {
                    return checkboxWithRemember.getCheckItemStr(row.id);
                },
                width:15,
            },
            {data: "roleName", title: "角色名称"},
            {data: "roleCode", title: "角色编码"},
            {data: "applicationName", title: "应用名称"},
        ],true, {ordering:true});
        config.bSort=false;
        config.aLengthMenu = [10,25,50,100];
        config.scrollX = true;
        config.autoWidth=true;
        config.scrollY = '65%';
        roleTable.dataTable(config);
       /*
        config.createdRow = null;
        roleTable.DataTable().on('draw', function() {
            checkGroup.autoSetSelect();
        });*/
    })

    function getSearchParam() {
        var applicationName = $("#applicationName").val().trim();
        var roleName = $("#roleName").val().trim();
        var param = 'applicationName='+applicationName+'&roleName='+roleName+"&userId=${userId!}&roleIdNotIn=${roleIdNotIn!}";
        return param;
    }

    function getSearchUrl(){
        var url = '${ctx}/role/ajaxLoadData?' + getSearchParam();
        url = encodeURI(url);
        return url;
    }

    function searchRoleBtn() {
        roleTable.DataTable().ajax.url(getSearchUrl()).load(null, false);
    }

    var checkGroup = new iUtils.CheckGroup({
        table:roleTable,
        callback:function(table,ele,arr){
            var data = table.fnGetData($(ele).parents("tr")[0]);
            arr[data.id] = {id: data.id, roleName: data.roleName, roleCode: data.roleCode, applicationName: data.applicationName, applicationId: data.applicationId};
        }
    });

    function sub(){
        //var arr = checkGroup.getAllCheckedIds();
       /* var rows = [];
        var nTrs = roleTable.fnGetNodes();
        $("[type='checkbox']:checked").each(function () {
            var data = roleTable.fnGetData($(this).parents("tr")[0]);
            rows.push(data);
        });*/
        //var arr = checkGroup.getAllCheckData();
        let rows = checkboxWithRemember.getCheckedRowArray();
        parent.addSubUserRoleRows(rows);
        sys.frameDialogClose();
    }
    function appNameChange() {
        roleTable.DataTable().ajax.url(getSearchUrl()).load(null, false);
    }
</script>